<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>活动</title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
		<script src="js/zepto.js"></script>
		<script type="text/javascript" src="js/touch.js"></script>
		<style type="text/css">
			.art{
	width: 100%;	
	/*height: 3.44rem;
	background-color: #f1f5f7;*/
}

.white{
	width: 100%;
	height: .65rem;
	background-color: #ffffff;
	position: relative;
}
.headpic{
	width: .33rem;
	height: .33rem;
	border-radius: 5px;
	position: absolute;
	top: .15rem;
	left: .11rem;
	background-color: black;
	overflow: hidden;
}
.headpic img{
	
	width: 100%;
	float: left;
}
.name{
	width: 1rem;
	height: .33rem;
	position: absolute;
	left: .5rem;
	top: .13rem;
	
}
.nname{
	width: 1rem;
	height: .2rem;
	font-size: 13px;
	line-height: .25rem;
	color: #353d40;
}
.time{
	width: 1rem;
	height: .13rem;
	font-size: 9px;
	margin-top: 2px;	
	color: #b0b0b0;
	font-family: "Avenir";
}

.article{
	width: 3.49rem;
	height: 1.3rem;
	margin: 0 auto;        	      	
}
.title{
	height: .62rem;
	width: 100%;
	font-size: .22rem;
	line-height: .7rem;
	color: #000000;
	font-family: nina;
}

.article1{	
	height: .4rem;
	width: 100%;
	font-size: .12rem;
	color: #696969;
	line-height: .2rem;
	letter-spacing: 2px;	    	
	word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 2; /** 显示的行数 **/
    overflow: hidden;  /** 隐藏超出的内容 **/       	
}
.picturea{
	width: 100%;
	height: 2.3rem;
	padding: 0 .1rem;
}
.picturea img{
    		width: 100%;
    		height: 100%;
    		float: left;
    		
    	}
    	.ppic{
    		width: .24rem;
    		height: .24rem;
    		border: 1px dashed darkgrey;
    		float: left;
    		margin-left: 65%;
    		margin-top: .04rem;
    		font-size: .2rem;
    		line-height: .2rem;
    		text-align: center;
    		color: dimgray;
    	}
    	.ppic input{
    		width: 100%;
    		height: 100%;
    		background: darkcyan;
    		float: left;
    		opacity: 0;
    	}
    	.tuwen_dajiazaikan_else{
    		border-top: 1px solid #f7f7f7;
    	}
    	.tuwen_dajiazaikan_topText{
    		letter-spacing: 2px;
    		
    	}
    	.xxx{    		
    		position: absolute;
    		left: .2rem;
    		top: 1.4rem;   		
    		font-size: 30px;
    		text-align: center;
    		line-height: 1rem;
    		width: .8rem;
    		height: 1rem;  
    		border: 1px dashed silver; 
    		
    		display: table-cell;
            vertical-align:middle;
    		*display: block;
			*font-size: 175px;
			*font-family:Arial;	
			overflow: hidden; 
			
			display: none;    		    		
    	}
    	
    	.xxx img{
    		width: 100%;    		
    		
    		vertical-align:middle;
    	}
    	
    	
    	.surin {
			background-color: #6db0ff;
			font-size: 10px;
			text-align: center;
			line-height: .3rem;
			letter-spacing: 3px;
			color: white;
			
			border-radius: 4px;
			position: relative;
			width: .62rem;
			height: .3rem;
			margin-top: .07rem;
			float: right;
			
		}
		.surin input{
			
			opacity: 0;
			border-radius: 4px;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			text-align: center;
			line-height: .3rem;
			font-size: 9px;
			color: black;
			cursor: pointer;
			border: none;
			outline: none;
			background-color: slateblue;
			
		}    	
		    	
    	
    	.zan{
    		width: 100%;
    		height: .4rem;
    		
    	}
    	
    	.pinglun_huifu_neirong_name{
    		color: #6db0ff;
    	}
    	.tuwen_pinglun_parts_right_bottom1 img,.pinglun_huifu_neirong_word img{
    		width: 2rem;
    		padding: 5px 2px 0 0;
    		display: block;
    	}
    	.pinglun_huifu {
    		height: 1.15rem;
    		overflow: hidden;
    	}
    	.pinglun_shouqi {
			width: .6rem;
			height: .11rem;
			color: #6db0ff;
			position: absolute;
			right: 0;
			bottom: .12rem;
			display: none;
		}
    	
    	.pinglun_footerr_search{
    		width: 2.3rem;
    	}
    	.footer_five1 {
			width: .3rem;
			height: 100%;
			position: absolute;
			top: 0;
			left: 3.1rem;
		}
		</style>
	</head>
	<body>
		<div class="art">
			<!--1图文-->
			<div class="white">
				<div class="headpic">
					<img src="img/33.png"/>
				</div>
				<div class="name">
					<div class="nname">
						ONE兔菌
					</div>
					<div class="time">
						11-12 11:56
					</div>
				</div>				
			</div>
			<div class="picturea">
				<img src="img/520.png" />
			</div>
			<div class="article_out">
				<div class="article">
					<div class="title">#&nbsp;520,趣表白&nbsp;#</div>
					<div class="article1">
						<a href="#javascript:;">爱TA，就要告诉全世界。520,表白正当时~520现金红包已经准备好，快来做个行动派！</a>
					</div>
				</div>
			</div>			
			<div class="tuwen_dajiazaikan_else">
				<div class="tuwen_dajiazaikan_topText">表白专区</div>
			</div>
			
			
			<ul class="tuwen_pinglun_comment_center">
				<!--<li class="tuwen_pinglun_parts">
					<div class="tuwen_pinglun_parts_left">
						<img src="img/touxiang4.png" />
					</div>
					<div class="tuwen_pinglun_parts_right">
						<div class="tuwen_pinglun_parts_right_top">
							<div class="tuwen_pinglun_names">
								乐观的无可儿
							</div>
							<a href="javascript:;">
								<span class="tuwen_pinglun_praiseImg"></span>
								<div class="tuwen_pinglun_pariseVal">134</div>
							</a>

						</div>
						<div class="tuwen_pinglun_parts_right_mid">
							<div class="tuwen_pinglun_clockImg"></div>
							<div class="tuwen_pinglun_TimeVal">3小时前</div>
						</div>
					</div>
					<div class="tuwen_pinglun_parts_right_ti"></div>
					<div class="tuwen_pinglun_parts_right_bottom1" userid="17485" username="乐观的可儿">
						歌名是什么?什么时候发布呢期待? 歌名是什么?什么时候发布呢期待? 歌名是什么?什么时候发布呢期待?
					</div>
				</li>

				<li class="tuwen_pinglun_parts">
					<div class="tuwen_pinglun_parts_left">
						<img src="img/touxiang4.png" />
					</div>
					<div class="tuwen_pinglun_parts_right">
						<div class="tuwen_pinglun_parts_right_top">
							<div class="tuwen_pinglun_names">
								乐观的无可儿
							</div>
							<a href="javascript:;">
								<span class="tuwen_pinglun_praiseImg"></span>
								<div class="tuwen_pinglun_pariseVal">134</div>
							</a>

						</div>
						<div class="tuwen_pinglun_parts_right_mid">
							<div class="tuwen_pinglun_clockImg"></div>
							<div class="tuwen_pinglun_TimeVal">3小时前</div>
						</div>
					</div>
					<div class="tuwen_pinglun_parts_right_ti"></div>
					<div class="tuwen_pinglun_parts_right_bottom1" userid="17485" username="乐观的可儿">
						歌名是什么?什么时候发布呢期待? 歌名是什么?什么时候发布呢期待? 歌名是什么?什么时候发布呢期待?
					</div>
					<div class="pinglun_huifu">
						<div class="pinglun_huifu_kuang"></div>
						<ul class="pinglun_huifu_neirong">
							<li>
								<div class="pinglun_huifu_neirong_name">
									一个姑凉
								</div>
								<div class="pinglun_huifu_neirong_word" userid="17485" username="一个姑娘">
									筷子兄弟的小苹果......
								</div>
							</li>

						</ul>
					</div>

				</li>
				<li class="tuwen_pinglun_parts">
					<div class="tuwen_pinglun_parts_left">
						<img src="img/touxiang4.png" />
					</div>
					<div class="tuwen_pinglun_parts_right">
						<div class="tuwen_pinglun_parts_right_top">
							<div class="tuwen_pinglun_names">
								乐观的无可儿
							</div>
							<a href="javascript:;">
								<span class="tuwen_pinglun_praiseImg"></span>
								<div class="tuwen_pinglun_pariseVal">134</div>
							</a>

						</div>
						<div class="tuwen_pinglun_parts_right_mid">
							<div class="tuwen_pinglun_clockImg"></div>
							<div class="tuwen_pinglun_TimeVal">3小时前</div>
						</div>
					</div>
					<div class="tuwen_pinglun_parts_right_ti"></div>
					<div class="tuwen_pinglun_parts_right_bottom1" userid="17485" username="乐观的可儿">
						歌名是什么?什么时候发布呢期待? 歌名是什么?什么时候发布呢期待? 歌名是什么?什么时候发布呢期待?
					</div>
					<div class="pinglun_huifu">
						<div class="pinglun_huifu_kuang"></div>
						<ul class="pinglun_huifu_neirong">
							<li>
								<div class="pinglun_huifu_neirong_name">
									一个姑凉
								</div>
								<div class="pinglun_huifu_neirong_word" userid="17485" username="一个姑娘">
									筷子兄弟的小苹果......
								</div>
							</li>
							<li>
								<div class="pinglun_huifu_neirong_name">
									一个姑凉
								</div>
								<div class="pinglun_huifu_neirong_word" userid="17485" username="一个姑娘">
									筷子兄弟的小苹果......
								</div>
							</li>
							<div class="pinglun_more">
								查看更多
							</div>

						</ul>
						<div class="ztuwenxiangping_ding"></div>

					</div>

				</li>-->

			</ul>
		</div>
		
		<div class="zan"></div>
		
		<footer>
			<!--<div class="footer_quit"></div>-->
			
			<input type="text" class="pinglun_footerr_search" placeholder="我有话说..." />
			<div class="footer_two">
				<img class="footerimg" src="img/neiwen_btn_zhuanfa_n@3x.png" />
			</div>
			
			<div class="footer_five1">
				<img class="footerimg" src="img/neiwen_btn_pinglun_s@3x.png" />
				<span></span>
			</div>
		</footer>
		
		<div class="fthch">
			<div class="titt">
				评论
				<div class="titt_tui">
					取消
				</div>
			</div>

			<div id="content" class="pinglun_footerr_tex">
				<form id="picimg" action="http://dev.onetuuu.com:8081/python/api/ActivitySetComment" method="post"></form>
				<div class="wrap">
					<div class="comment">
						<div class="content">
							<div class="cont-box">
								<textarea class="text pinglun_footerr_text" placeholder="请输入..."></textarea>
								<div class="pinglun_footerr_tex_num"><em>500</em>/500</div>
							</div>
							<div class="tools-box">
								<div class="xxx">
									
								</div>
								<div class="operator-box-btn">
									<div class="ppic">
										+
										<input type="file" accept="image/*" multiple="multiple"/>
									</div>
									<span class="face-icon">☺</span>
								</div>
								<div class="surin"><input type="button" value="发送" />发送</div>
							</div>
						</div>
					</div>
				</div>
			</div>						
		</div>
		<script type="text/javascript" src="js/sinaFaceAndEffec.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<script type="text/javascript" src="js/localResizeIMG.js" ></script>
		<!-- mobileBUGFix.js 兼容修复移动设备 -->
		<script type="text/javascript" src="js/mobileBUGFix.mini.js" ></script>
		<script type="text/javascript">
		$(document).ready(function(){
			
			//var phoneNumber = ((document.URL).split("&")[1].split("=")[1]);
			
			var useI = "";
			var useN = "";
			var useI1 = "";
			var useN1 = "";
				var op="";
				$('input:file').localResizeIMG({
					
					width: 400,
	
					quality: 0.8,
	
					success: function(result) {
						
						$('.xxx').css({display:"block"})
						
						var img = new Image();
						
						op = result.base64;
						
						img.src = result.base64;
	
						$('.xxx').append(img);
						
					}
	
				});
				
				
				
				var pinHt = "";
				var pinHttt = "";
				$.when(
//					$.ajax({
//						type: 'GET',
//						url: 'http://dev.onetuuu.com:8081/python/api/ActivityGetComment',                                     //jsonp 类型下只能使用GET,不能用POST,这里不写默认为GET
//						dataType: 'jsonp', //指定为jsonp类型     
//						async:false,
//						data: { //数据参数
//							"dataID": "0",
//							"phoneNumber":22222
//						},
//						success: function(data) {
//							console.log(data);
//							var reco = "";
//							for(var ta=0;ta<data.data.length;ta++){
//							
//								if(data.data[ta].Reply.length==0){
//									
//									pinHt += `<li class="tuwen_pinglun_parts">
//										<div class="tuwen_pinglun_parts_left" user="`+data.data[ta].userID+`">
//											<img src="`+data.data[ta].userImg+`"/>
//										</div>
//										<div class="tuwen_pinglun_parts_right">
//											<div class="tuwen_pinglun_parts_right_top">
//												<div class="tuwen_pinglun_names">
//													`+data.data[ta].Username+`
//												</div>
//												<a href="javascript:;">
//													<span class="`+zan(data.data[ta].isLike)+`" commentID="`+data.data[ta].CommentID+`"></span>
//													<div class="tuwen_pinglun_pariseVal">`+data.data[ta].Click+`</div>
//												</a>
//											</div>
//											<div class="tuwen_pinglun_parts_right_mid">
//												<div class="tuwen_pinglun_clockImg"></div>
//												<div class="tuwen_pinglun_TimeVal">`+time(data.data[ta].Date)+`</div>
//											</div>
//										</div>
//										<div class="tuwen_pinglun_parts_right_ti"></div>
//										<div class="tuwen_pinglun_parts_right_bottom1" userid="`+data.data[ta].CommentID+`" username="`+data.data[ta].Username+`">
//											`+AnalyticEmotion(data.data[ta].Comment)+`
//										</div>	
//									</li>`
//								}else if(data.data[ta].Reply.length>0){
//									
//								
//									
//									for(var l=0;l<data.data[ta].Reply.length;l++){
//										pinHttt+=`<li><div class="pinglun_huifu_neirong_name">
//														`+data.data[ta].Reply[l].Name1+`<em style="color:black">&nbsp;回复了&nbsp;</em>`+data.data[ta].Reply[l].Name2+`
//													</div>
//													<div class="pinglun_huifu_neirong_word" userid="`+data.data[ta].Reply[l].recommendID+`" username="`+data.data[ta].Reply[l].Name1+`">
//														`+data.data[ta].Reply[l].Recomment+`
//													</div></li>`
//													
//									}
//									
//									pinHt += `<li class="tuwen_pinglun_parts">
//											<div class="tuwen_pinglun_parts_left" user="`+data.data[ta].userID+`">
//												<img src="`+data.data[ta].userImg+`"/>
//											</div>
//											<div class="tuwen_pinglun_parts_right">
//												<div class="tuwen_pinglun_parts_right_top">
//													<div class="tuwen_pinglun_names">
//														`+data.data[ta].Username+`
//													</div>
//													<a href="javascript:;">
//														<span class="`+zan(data.data[ta].isLike)+`" commentID="`+data.data[ta].CommentID+`"></span>
//														<div class="tuwen_pinglun_pariseVal">`+data.data[ta].Click+`</div>
//													</a>
//												</div>
//												<div class="tuwen_pinglun_parts_right_mid">
//													<div class="tuwen_pinglun_clockImg"></div>
//													<div class="tuwen_pinglun_TimeVal">`+time(data.data[ta].Date)+`</div>
//												</div>
//											</div>
//											<div class="tuwen_pinglun_parts_right_ti"></div>
//											<div class="tuwen_pinglun_parts_right_bottom1" userid="`+data.data[ta].CommentID+`" username="`+data.data[ta].Username+`">
//												`+AnalyticEmotion(data.data[ta].Comment)+`
//											</div>		
//											
//											<div class="pinglun_huifu">
//												<div class="pinglun_huifu_kuang"></div>
//												<ul class="pinglun_huifu_neirong">																					
//													`+pinHttt+`
//													<div class="pinglun_more">
//														查看更多
//													</div>
//												</ul>
//												<div class="ztuwenxiangping_ding"></div>
//			
//											</div>								
//										</li>`
//									pinHttt = "";
//								}
//								
//							}
//							
//							$(".tuwen_pinglun_comment_center").html(pinHt);
//							function time(x){
//								if(x<=10){
//									return("刚刚")
//								}else if(x>10&&x<=3600){
//									return(
//										Math.ceil(x/60)+"分钟前"
//									)
//								}else if(x>3600&&x<=86400){
//									return(
//										Math.ceil(x/3600)+"小时前"
//									)
//								}else if(x>86400&&x<=31536000){
//									return(
//										Math.ceil(x/86400)+"天前"
//									)
//								}else if(x>31536000&&x<=315360000){
//									return(
//										Math.ceil(x/31536000)+"年前"
//									)
//								}else{
//									return("史前")
//								}
//							};	
//							function zan(x){
//								if(x==1){
//									return("tuwen_pinglun_praiseImg_s")
//								}else if(x==0){
//									return("tuwen_pinglun_praiseImg")
//								}
//							};	
//							//$(".pinglun_huifu_neirong").height(300)
//							$(".pinglun_more").click(function(){
//								$(this).parent().parent().height("auto");
//								$(this).css({"display":"none"});
//								$(".pinglun_shouqi").css({"display":"block"});
//							});
//							$(".pinglun_shouqi").click(function(){
//								$(this).parent().parent().height("1.15rem");
//								$(this).css({"display":"none"});
//								$(".pinglun_more").css({"display":"block"});
//							})
//							
//							
//						}
//					})
					
				)
				//点击回复
				
				$(".tuwen_pinglun_comment_center").on("singleTap",".tuwen_pinglun_parts_right_bottom1",function(){
					useI = $(this).attr("userid");
					useN = $(this).attr("username");
					$(".fthch").css({display: "block"});
					$('.pinglun_footerr_text').focus();
					$(".pinglun_footerr_text").attr("placeholder","回复"+useN);
				});
				
				$(".tuwen_pinglun_comment_center").on("singleTap",".pinglun_huifu_neirong_word",function(){
					useI = $(this).attr("userid");
					useN = $(this).attr("username");
					$(".fthch").css({display: "block"});
					$('.pinglun_footerr_text').focus();
					$(".pinglun_footerr_text").attr("placeholder","回复"+useN);
				})
				//评论
				
				$(".surin").click(function(){
					
					
					//转码解析输入法自带表情
					function utf16toEntities(str) {
			            var patt=/[\ud800-\udbff][\udc00-\udfff]/g;
			            // 检测utf16字符正则
			            str = str.replace(patt, function(char){
			                var H, L, code;
			                if (char.length===2) {
			                    H = char.charCodeAt(0);
			                    // 取出高位
			                    L = char.charCodeAt(1);
			                    // 取出低位
			                    code = (H - 0xD800) * 0x400 + 0x10000 + L - 0xDC00;
			                    // 转换算法
			                    return "&#" + code + ";";
			                } else {
			                    return char;
			                }
			            });
			            return str;
			        }
					
					var txtxt = utf16toEntities($(".pinglun_footerr_text").val());
							
					console.log(op)
				
					var fo = $("#picimg");
											
					fo.append('<input type="hidden" name="PhoneNumber" value="'+phoneNumber+'"><input type="hidden" name="dataID" value="0"><input type="hidden" name="Valu" value="'+txtxt+'"><input type="hidden" name="CommentID" value="'+useI+'"><input type="hidden" name="imgPic" value="'+op+'">')					
					
					fo.submit();
									
				})
				
				
				
				
				
				//点赞
				$('.tuwen_pinglun_comment_center').on('touchstart', 'span', function(ev) {
					var
						ev = ev || window.event,
						oTarget = ev.srcElement || ev.target,
						commentid = $(this).attr("commentid");
						
					if($(this).hasClass("tuwen_pinglun_praiseImg")) {
						$(this).removeClass("tuwen_pinglun_praiseImg").addClass('tuwen_pinglun_praiseImg_s');
						$(this).next().html(parseInt($(this).next().html()) + 1);
						$(".pinglun_dianzanxiaoguo").css("display", "block");
						$(".pinglun_dianzanxiaoguo").html("点赞成功+1");
						setTimeout('$(".pinglun_dianzanxiaoguo").css("display","none")', 2000)
					}
					
					
					
					$.ajax({
							type:'GET', 
					        url:'http://dev.onetuuu.com:8081/python/api/ActivitycommentLike',       //跨域到https://www.wp.com，另，https://test.com也算跨域	                                       //jsonp 类型下只能使用GET,不能用POST,这里不写默认为GET
					       	async:false,	
					        dataType:'jsonp',			                //指定为jsonp类型
					        data:{									    //数据参数						
								"id": "0",
								"commentID":commentid,
								"phoneNumber":phoneNumber
					        },
					        success:function fcv(data){
					        	
					        }			
					})					
				})
				
				$('.footer_five1').on('touchstart', function(ev) {
					
					//document.body.scrollHeight 全文高
					//document.body.clientHeight 屏幕搞
					
					var speed=500;//滑动的速度
			        $('body,html').animate({ scrollTop: 425 }, speed);
			       
				})	
			
		})
		
			
			
		</script>
	</body>
</html>